<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>响应式</title>
    <!-- <script src="./vue.global.js"></script> -->
    <!--引入vue2开发版本的vue核心包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
</head>

<!--
v-bind 对css样式的控制
一种是传对象控制类名 {类名1:布尔值,类名2：布尔值}
一种是传数组控制类名 [类名1，类名2，……]
-->
<style>
    .bak {
        background-color: pink;
    }

    .siz {
        width: 200px;
        height: 200px;
    }

    .big {
        width: 400px;
        height: 400px;
    }
</style>

<body>
    <div id="app">
        app的盒子
        <div class="bak" v-bind:class="{siz:true, big:false}">测试v-bind对css样式控制的盒子</div>
        <div class="bak" v-bind:class="['siz','big']">测试v-bind对css样式控制的盒子</div>
    </div>

    <script>
        const app = new Vue({
            el: '#app'
        })
    </script>

</body>

</html>